<template>
  <div>
    <!-- fixed_right小导航 -->
    <div class="fixed_right">
      <div class="concat">
        <span></span>
        <span>咨询商家</span>
      </div>
      <div class="down">
        
        <div class="down_code">
          <img src="/img/wlh/erweima.png" alt="" />
        </div>
      </div>
      <a class="to_top" href="#" @click="gotoTop"></a>
    </div>
  </div>
</template>
<style scoped>
/* fixed小导航 */
/* fixed_right小导航css */
.fixed_right {
  width: 56px;
  height: 190px;
  position: fixed;
  right: 0;
  top: 700px;
  color: #fff;
  z-index: 1000;
}
.fixed_right .concat {
  font-family: "icomoon";
  width: 100%;
  height: 76px;
  margin-bottom: 1px;
  background-color: #222222;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
}
.fixed_right .concat:hover {
  opacity: 0.9;
}
.fixed_right .down {
  width: 100%;
  height: 56px;
  margin-bottom: 1px;
  background-color: #222222;
  line-height: 56px;
  text-align: center;
  font-family: "icomoon";
  font-size: 24px;
  position: relative;
  cursor: pointer;
}
.down .down_code {
  width: 180px;
  height: 180px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  position: absolute;
  left: -190px;
  top: 0px;
  display: none;
}
.down .down_code img {
  width: 100%;
}
.fixed_right .down:hover {
  opacity: 0.9;
}
.fixed_right .down:hover .down_code {
  display: block;
}
.fixed_right .to_top {
  display: block;
  width: 100%;
  height: 56px;
  background-color: #222222;
  line-height: 56px;
  text-align: center;
  font-family: "icomoon";
  font-size: 36px;
  color: #fff;
  padding-top: 5px;
}
.fixed_right .to_top:hover {
  opacity: 0.9;
}
.fixed_right .concat span:first-child {
  font-family: "icomoon";
  font-size: 24px;
}
.fixed_right .concat span:last-child {
  font-size: 12px;
}
</style>
<script>
export default {
  methods: {
    gotoTop() {
      // 获取当前页面纵向距离顶端的高度
      const currentY =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 传参并调用滚动动画函数
      this.scrollAnimation(currentY, 0);
    },
    scrollAnimation(currentY, targetY) {
      // 获取当前位置方法
      // 计算需要移动的距离
      let needScrollTop = targetY - currentY;
      let _currentY = currentY;
      setTimeout(() => {
        // 一次调用滑动帧数，每次调用会不一样
        const dist = Math.ceil(needScrollTop / 10);
        _currentY += dist;
        window.scrollTo(_currentY, currentY);
        // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
        if (needScrollTop > 10 || needScrollTop < -10) {
          this.scrollAnimation(_currentY, targetY);
        } else {
          window.scrollTo(_currentY, targetY);
        }
      }, 1);
    },
  },
};
</script>